<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org"
      xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity4">
<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=1226">
    <meta th:name="_csrf" th:content="${_csrf.token}"/>
    <!-- 默认的header name是X-CSRF-TOKEN -->
    <meta th:name="_csrf_header" th:content="${_csrf.headerName}"/>
    <title>商品详情</title>
    <!-- 引入图标库-->
    <link href="http://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <!--bootstrap-->
<!--    <link rel="stylesheet" th:href="@{/static/resource/css/lib/bootstrap.min.css}"/>-->
    <link rel="stylesheet" th:href="@{/static/assets/css/bootstrap.css}"/>

    <!--    引入alibaba iconfont-->
    <link rel="stylesheet" href="//at.alicdn.com/t/font_2994454_x1hkqrl5b48.css">

    <!--css-->
    <link rel="stylesheet" th:href="@{/static/resource/css/reset.css}"/>
    <link rel="stylesheet" th:href="@{/static/resource/css/index.css}"/>
    <link rel="stylesheet" th:href="@{/static/resource/css/cart.css}"/>
    <link rel="stylesheet" th:href="@{/static/resource/css/home.css}"/>
    <link rel="stylesheet" th:href="@{/static/resource/css/order.css}"/>
    <link rel="stylesheet" th:href="@{/static/resource/css/common/common.css}"/>
    <link rel="stylesheet" th:href="@{/static/js/directives/css/search.css}"/>
    <link rel="stylesheet" th:href="@{/static/js/directives/css/focusImg.css}"/>
    <link rel="stylesheet" th:href="@{/static/js/directives/css/focusImgMult.css}"/>
    <link rel="stylesheet" th:href="@{/static/js/directives/css/ulBox2.css}"/>


    <script th:src="@{/static/assets/js/jquery-3.4.1.min.js}"></script>
    <script th:src="@{/static/assets/js/bootstrap.bundle.min.js}"></script>

<!--    notice-->
    <link th:href="@{/static/pear-admin/dist/noticejs.css}" rel="stylesheet" type="text/css">
    <link th:href="@{/static/pear-admin/dist/animate.css}" rel="stylesheet" type="text/css">

    <!--    layui-->
    <link rel="stylesheet" th:href="@{/static/layui/css/layui.css}">

</head>

<style>
    * {
        box-sizing: border-box;
    }


    div.search {
        padding: 30px 0;
    }

    form {
        position: relative;
        width: 300px;
        margin: 0 auto;
    }

    input, button {
        border: none;
        outline: none;
    }

    input {
        width: 100%;
        height: 42px;
        padding-left: 13px;
    }

    button {
        height: 42px;
        width: 42px;
        cursor: pointer;
        position: absolute;
    }

    /*搜索框6*/
    .bar6 input {
        border: 2px solid #c5464a;
        border-radius: 5px;
        background: transparent;
        top: 0;
        right: 0;
    }

    .bar6 button {
        background: #c5464a;
        border-radius: 0 5px 5px 0;
        width: 60px;
        top: 0;
        right: 0;
    }

    .bar6 button:before {
        content: "\f002";
        font-family: FontAwesome;
        font-size: 13px;
        color: #F9F0DA;
    }

    .search input {
        height: 42px;
    }


    ul, ol {
        list-style: none;
    }

    input, button {
        outline: none;
        border: none;
    }

    a {
        text-decoration: none;
    }

    .clearfix::before,
    .clearfix::after {
        content: "";
        height: 0;
        line-height: 0;
        display: block;
        visibility: hidden;
    }

    .clearfix::after {
        clear: both;
    }

    .product li {
        float: left;
        width: 234px;
        height: 246px;
        padding: 34px 0 20px;
        z-index: 1;
        margin-left: 14px;
        margin-bottom: 35px;
        background: #fff;
        -webkit-transition: all .2s linear;
        transition: all .2s linear;
        position: relative;
    }


    .pro-img a {
        width: 100%;
        height: 100%;
    }

    .pro-img img {
        display: block;
        width: 100%;
        height: 100%;
    }

    .product li h3 {
        margin: 0 10px;
        font-size: 14px;
        font-weight: 400;
        text-align: center;
    }

    .product li h3 a {
        color: #333;
    }


    .price del {
        color: #b0b0b0;
    }


    .review a {
        color: #757575;
        display: block;
        padding: 8px 30px;
        outline: 0;
    }

    .review a span {
        display: block;
        margin-bottom: 5px;
        color: #fff;
    }

    .product li:hover {
        -webkit-box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
        box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
        -webkit-transform: translate3d(0, -2px, 0);
        transform: translate3d(0, -2px, 0);
    }

    .product li:hover .review {
        opacity: 1;
        height: 76px;
    }


    /*    */
    #box {
        width: 100%;
        height: 880px;
    }

    #content {
        width: 1226px;
        height: 860px;
        margin: 0 auto;
    }

    #left {
        margin-top: 3%;
        width: 500px;
        height: 410px;
        float: left;
    }

    #top {

        width: 100%;
        height: 76.8px;

    }

    #top ul li {

        float: left;
        width: 160px;
        height: 40px;
        text-align: center;
        list-style: none;
        line-height: 80px;
    }

    #top ul li a {

        text-decoration: none;
    }

    #big {
        width: 500px;
        height: 350px;
        float: left;
    }

    #small {
        width: 500px;
        height: 60px;
        float: left;
    }


    #right {
        margin-top: 3%;
        width: 550px;
        height: 650px;
        float: left;
        margin-left: 10%;
    }

    #title {
        width: 100%;
        height: 60px;
    }

    #productname {

        font-size: 20px;
        margin-top: 15px;

    }

    #price {
        margin-left: 16px;
        font-size: 20px;
        margin-top: 15px;
        color: #ff6700;
    }

    #version {

        width: 100%;
        height: 520px;
    }

    .versioninfo {
        width: 100%;
        height: 210px;

    }

    /* 默认未被选中样式*/
    .notClicked {

        width: 47%;
        height: 50px;
        float: left;
        list-style: none;
        text-align: center;
        border: 1px solid #e3e3e3;
        line-height: 50px;
        margin-right: 13px;
        margin-bottom: 13px;
    }

    /* 被选中样式*/
    .clicked {

        width: 47%;
        height: 50px;
        float: left;
        list-style: none;
        text-align: center;
        border: 1px solid #FFA500;
        line-height: 50px;
        margin-right: 13px;
        margin-bottom: 13px;
    }


    #Finally {

        width: 100%;
        height: 100px;

    }
    /* 下拉框*/

    .dropbtn {
        border: none;
        cursor: pointer;
    }

    .dropdown {
        position: relative;
        display: inline-block;
        z-index: 100;
        margin-left:25px
    }

    .dropdown-content {
        display: none;
        background-color: #f9f9f9;
        min-width: 50px;
        overflow: auto;
        box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
        z-index: 1;
    }

    .dropdown-content a {
        color: black;
        text-decoration: none;
        display: block;
    }

    .dropdown a:hover {background-color: #f1f1f1}

    .show {display:block;}
    .topbar a:hover{
        color: orange;
    }


/*    评论*/
    .navbar a {
        color: white !important;
    }

    .hover:hover {
        color: #849199;
    }

    .summary-text {
        font-weight: 300 !important;
        letter-spacing: 1px !important;
        line-height: 1.8 !important;

        font-weight: 300 !important;

    }

    .summary-text:hover {
        cursor: pointer;
    }

    .me-h4 {
        font-size: 1.28em;
        font-family: Lato, 'Helvetica Neue', Arial, Helvetica, sans-serif;
        font-weight: 700;
        line-height: 1.2857em;
        text-transform: none;
        margin-bottom: 10px;
    }

    body {
        background-image: url(../img/bg.png);

    }

    .me-a {
        text-decoration: none;
    }

    .mini.fa {
        line-height: 1;
        font-size: .2em;

    }

    #noteEdit textarea {
        border: #ccc solid 1px;
        width: 100%;
        height: 200px;
        resize: none;
    }

    .divier {
        border-top: 1px solid rgba(34, 36, 38, .15);
        border-bottom: 1px solid rgba(255, 255, 255, .1);
        margin-top: 2rem;
        margin-bottom: 2rem;
        border-top-color: rgba(34, 36, 38, .15) !important;
        border-left-color: rgba(34, 36, 38, .15) !important;
        border-bottom-color: rgba(255, 255, 255, .15) !important;
        border-right-color: rgba(255, 255, 255, .15) !important;
        color: white;
    }

    .footer-div {
        border-right: 1px solid #666666 !important;
    }

    .footer-div .me-h4 {
        font-weight: 200;

    }

    .footer-div .me-a {
        color: #666666;
        align-content: center;
        text-align: center;


    }

    .footer-div .me-a:hover {
        color: white;
    }

    /*复选框开关样式*/
    .switch {
        position: relative;
        display: inline-block;
        width: 60px;
        height: 34px;
    }

    .switch input {
        display: none;
    }

    .slider {
        position: absolute;
        cursor: pointer;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: #ccc;
        -webkit-transition: .4s;
        transition: .4s;
    }

    .slider:before {
        position: absolute;
        content: "";
        height: 26px;
        width: 26px;
        left: 4px;
        bottom: 4px;
        background-color: white;
        -webkit-transition: .4s;
        transition: .4s;
    }

    input:checked + .slider {
        background-color: #2196F3;
    }

    input:focus + .slider {
        box-shadow: 0 0 1px #2196F3;
    }

    input:checked + .slider:before {
        -webkit-transform: translateX(26px);
        -ms-transform: translateX(26px);
        transform: translateX(26px);
    }

    .slider.round {
        border-radius: 34px;
    }

    .slider.round:before {
        border-radius: 50%;
    }
    /****************/



    .comment .avatar {
        display: block;
        width: 35px;
        height: 35px;
        float: left;
        margin: .2em 0 0;
    }

</style>

<body>
<!-- jquery.js angular.js-->
<script th:src="@{/static/resource/lib/jquery.min.js}"></script>
<script th:src="@{/static/resource/lib/angular.js}"></script>

<!--头部工具栏-->
<div class="topbar">
    <div class="container">
        <div class="topbar_nav fl">
            <ul>
                <li><a th:href="@{/web/index/}">首页</a></li>
                <li><a th:href="@{/web/couponsActivity/toCouponsActivity}">领劵中心</a></li>
                <li><a th:href="@{/web/seckill/toSearchSeckillPage}">秒杀</a></li>
                <li><a href="https://github.com/youzhengjie9/cloud-mall">项目链接</a></li>
            </ul>
        </div>
        <div class="topbar_cart fr">
            <a href="/web/cart/tocart">购物车</a>
        </div>

        <div class="topbar_cart fr">
            <a href="/web/order/toOrderPage">我的订单</a>
        </div>

        <div class="topbar_cart fr">
            <a href="/web/seckill/toSeckillSuccessList">秒杀成功订单</a>
        </div>

<!--        <div class="topbar_info fr" style="width:220px">-->
<!--            <form name="logoutform" th:action="@{/web/logout/logout}" method="post"></form>-->
<!--            <a class="nav-link" th:href="@{/web/register/toregister}">注册</a>-->
<!--            <a class="nav-link" sec:authorize="isAnonymous()" th:href="@{/web/login/toLoginPage}">登录</a>-->
<!--            <a sec:authorize="isAuthenticated()" class="nav-link dropbtn" onclick="myFunction()">[[${username}]]</a>-->
<!--            <a href="#" onclick="kefu(1)">人工客服</a>-->
<!--            <div class="dropdown">-->
<!--                <div id="myDropdown" class="dropdown-content" style="width: 120px;height: 70px">-->
<!--                    <a th:href="@{/web/center/toBaseInfo}" style="width: 100px;height: 30px;">个人中心</a>-->
<!--                    <a href="javascript:document.logoutform.submit();" style="width: 100px;height: 30px;">退出登录</a>-->
<!--                </div>-->
<!--            </div>-->
<!--        </div>-->
    </div>
</div>


<!--  商品详情-->

<div id="box">


    <div id="content">

        <div id="top">

            <ul>
                <li><a href="#">小米6</a></li>
                <li><a href="#">小米note3</a></li>
                <li><a href="#">iPhone 13</a></li>
                <li><a href="#">红米note3</a></li>
                <li><a href="#">iqoo 8</a></li>
                <li><a href="#">小米11</a></li>
            </ul>


        </div>


        <div id="left">

            <div id="big">

                <img th:src="${product.img}" style="width: 500px;height: 350px">

            </div>

<!--            缩略图待实现-->
            <div id="small">


            </div>
        </div>


        <div id="right">


            <div id="title">

                <div id="productname">
                    购买[[${product.name}]]
                    <span id="price">
  		 				[[${product.price}]]起
  		 			</span>
                </div>


            </div>
            <span style="color: red;">温馨提示：产品是否购买成功，以最终下单为准哦，请尽快结算!</span>
            <div id="version">

                <div class="versioninfo" th:each="order:${#numbers.sequence(1,count)}">
                    <span th:text="${order}"></span>
                    <span th:text="${versionInfoFallbackFeign.selectVersionInfoTitle(product.productId,order)}"></span>
                    <span style="color: #b0b0b0;font-size: 14px;"
                          th:text="${versionInfoFallbackFeign.selectVersionInfoDesc(product.productId,order)}"></span>
                    <ul th:id="'vul'+${order}">
                        <li class="notClicked" th:id="'vli'+${versioninfo.versionId}" th:each="versioninfo:${versionInfoFallbackFeign.selectVersionInfoByPidAndOrder(product.productId,order)}"
                            th:text="${versioninfo.getName()}" th:onclick="pushSku(this,[[${order}]],[[${versioninfo.versionId}]])">
                        </li>
                    </ul>
                </div>

            </div>

            <div id="Finally">

                <p>您选择了以下产品</p>
                <p id="productInfos" style="color: cornflowerblue;">[[${product.getName()}]]</p>
                <button onclick="pushCart()" class="btn btn-warning" style="color: black">放入购物车</button>
            </div>


        </div>

    </div>

</div>

<!---->


<!-- buy-choose-box END -->
<hr/>
<!--<div class="container">-->
<!--    <div class="pro-detail-box">-->
<!--        <div class="section section-image is-visible">-->
<!--            <a href="#"><img src="/static/img/mi5/mi5-shenruliaojie.jpg"></a>-->
<!--        </div>-->
<!--    </div>-->
<!--</div>-->


<!-- 评论-->

<div class="container-lg mt-5">
    <div class="card border p-2">
        <div class="card-header text-info  border-bottom border-info" style="background-color: white;">
            评论区
        </div>
        <div class="card-body">
            <input type="hidden" name="pid" th:value="${product.getProductId()}">
            <!--            输入框-->
            <div id="noteEdit">
                <textarea name="note"></textarea>
            </div>
            <!--提交列表-->
            <div class="input list-inline mt-3 container-fluid ">
                <div class="row ">

                    <div class="  list-inline-item col-lg-auto  p-0">
                        <button type="button" class="btn  btn-info " onclick="sendComment()">发送</button>
                    </div>
                    <div class="  list-inline-item col-lg-auto  p-0">
                        <button type="button" class="btn  btn-info " style="width: 100%;height: 100%" onclick="clearplaceholder()">切换成评论</button>
                    </div>
                </div>


            </div>

            <!--评论列表-->
            <div class=" container-fluid mt-5 border p-2" style="border-top: #17a2b8 solid 2px !important;" th:if="${comments ne null and comments.size()>0}">
                <div class="p-1 comments">

<!--                    -->
                    <div class="container comment  m-1 p-0" th:each="comment:${comments}">
                        <a class="me-a avatar p-0 m-0">
                            <img class="w-100 h-100 rounded-circle" th:src="${comment.getUser().getUserDetail().getIcon()}"
                                 alt="">
                        </a>
                        <div class=" ml-3 border-left ">
                            <div class="container ml-2">
                                <a class="author">
                                    <span th:text="${comment.getUser().getUsername()}"></span>
<!--                                    <span class="border-primary border rounded text-primary small  p-1">亿贫如洗</span>-->
                                    <span class="summary-text small" th:text="${comment.getCreateTime()}"></span>
                                    <span><a style="cursor: pointer;color: #007BFF;" th:onclick="openReply([[${comment.id}]],-1)">回复</a></span>
                                </a>
                            </div>
                            <div class="messageText ml-2 container m-2" th:text="${comment.getContent()}"></div>

                            <!--  评论回复-->
                            <div class="p-1 comments m-3" th:if="${comment.getSecondReplies() ne null and comment.getSecondReplies().size()>0}">
<!--                                二级评论-->
                                <div class="container comment  m-1 p-0" th:each="seconds:${comment.getSecondReplies()}">
                                    <a class="me-a avatar p-0 m-0 ">
                                        <img class="w-100 h-100 rounded-circle"
                                             th:src="${seconds.getFromUser().getUserDetail().getIcon()}"
                                             alt="">
                                    </a>
                                    <div class=" ml-3  ">
                                        <div class="container ml-2">
                                            <a class="author ">
                                                <span th:text="${seconds.getFromUser().getUsername()}"></span>
<!--                                                <span class="border-primary border rounded text-primary small  p-1">机智一批</span>-->
                                                <span class="summary-text small" th:text="${seconds.getCreateTime()}"></span>
                                                <span><a style="cursor: pointer;color: #007BFF;" th:onclick="openReply([[${seconds.commentid}]],[[${seconds.rootReply}]])">回复</a></span>
                                            </a>
                                        </div>
                                        <div class="messageText ml-2 container m-2" th:text="${seconds.getContent()}"></div>

                                    </div>

<!--                                    多级评论-->
                                    <div class="container comment  m-1 p-0" th:if="${seconds.getThirdReplies() ne null and seconds.getThirdReplies().size()>0}" th:each="thirds:${seconds.getThirdReplies()}">
                                        <a class="me-a avatar p-0 m-0 ">
                                            <img class="w-100 h-100 rounded-circle"
                                                 th:src="${thirds.getFromUser().getUserDetail().getIcon()}" alt="">
                                        </a>
                                        <div class=" ml-3  ">
                                            <div class="container ml-2">
                                                <a class="author ">
                                                    <span th:text="${thirds.getFromUser().getUsername()}"></span>
<!--                                                    <span class="border-primary border rounded text-primary small  p-1">亿贫如洗</span>-->
                                                    <span class="text-info">@[[${thirds.getToUser().getUsername()}]]</span>
                                                    <span class="summary-text small" th:text="${thirds.getCreateTime()}"></span>
                                                    <span><a style="cursor: pointer;color: #007BFF;" th:onclick="openReply([[${thirds.commentid}]],[[${thirds.rootReply}]])">回复</a></span>
                                                </a>
                                            </div>
                                            <div class="messageText ml-2 container m-2" th:text="${thirds.getContent()}"></div>

                                        </div>

                                    </div>

                                </div>

                            </div>
                        </div>

                    </div>

<!--                    -->


                </div>
            </div>

            <!--评论列表-->
            <div class=" container-fluid mt-5 border p-2" style="border-top: #17a2b8 solid 2px !important;" th:if="${comments eq null or comments.size()<=0}">
                <div class="p-1 comments">
                    目前暂无评论
                </div>
            </div>


        </div>


    </div>

</div>


<!---->



</body>


<script th:src="@{/static/pear-admin/dist/notice.js}"></script>

<script th:inline="javascript">

    // 获取<meta>标签中封装的_csrf信息 ,否则会请求403
    var token = $("meta[name='_csrf']").attr("content");
    var header = $("meta[name='_csrf_header']").attr("content");
    var headers = {"X-CSRF-TOKEN": token}

    //js提交表单
    function submitData() {
        document.getElementById("form").submit();
    }

    var size=[[${count}]];

    var skuarr=new Array(size); //存放sku的id的数组

    //例如order=1的存放在skuarr[0]中


    function pushSku(elem,orderid,skuid) {
        
        //放入skuarr
        skuarr[orderid-1]=skuid;

        let clickElem = document.getElementById(elem.id);//获取被点击的对象

        let parentNode = document.getElementById(elem.id).parentNode; //获取被点击对象的父节点

        let oldClick=document.querySelectorAll('#'+parentNode.id+' > li.clicked')[0];

        if(oldClick==null)
        {
            clickElem.classList.remove('notClicked');//移除未被点击样式
            clickElem.classList.add('clicked'); //添加被点击样式

        }else {

            oldClick.classList.remove('clicked');//移除旧的被点击样式
            oldClick.classList.add('notClicked');//添加旧的未被点击样式

            clickElem.classList.remove('notClicked');//移除未被点击样式
            clickElem.classList.add('clicked');
        }

        var productid=[[${product.productId}]]; //当前商品id
        //每次切换属性都要刷新一下价格
        $.ajax({
            url: "/web/versionInfo/selectPriceByversionId",
            data: {
                "skuarr": skuarr,
                "productid": productid
            },
            type: "GET",
            success: function (data) {
                document.getElementById('price').innerText=data+'元';
            }
        })

        //每次切换属性都要刷新一下购买产品信息
        $.ajax({
            url: "/web/versionInfo/selectNameByversionId",
            data: {
                "skuarr": skuarr,
                "productid": productid
            },
            type: "GET",
            success: function (data) { //ajax不要直接返回字符串，可以用JSONobject封装，不然会乱码
                document.getElementById('productInfos').innerText=data.name;
            }
        })


    }
    //放入购物车
    function pushCart() {
        //一次校验 是否可以放入购物车
        var boolean=1; //默认为1就是能买，0不可以买
        for (var i=0;i<skuarr.length;++i)
        {
            if(skuarr[i]==null)
            {
                boolean=0; //此时不能买，因为必选选项没有选完
                break;
            }
        }
        if(boolean==1) //可以放入购物车
        {
            var productid=[[${product.productId}]]; //当前商品id
            $.ajax({
                url: "/web/cart/pushCart",
                data: {
                    "skuarr": skuarr,
                    "productid": productid
                },
                type: "POST",
                dateType: 'json',
                headers:headers,
                success: function (data) {
                    if(data.code==200)
                    {
                        alert('商品放入购物车成功');
                    }else if(data.code==404)
                    {
                        alert('商品放入购物车失败');
                    }

                }
            })
        }else {
            alert('商品放入购物车失败')
        }

    }


    /* 点击按钮，下拉菜单在 显示/隐藏 之间切换 */
    function myFunction() {
        document.getElementById("myDropdown").classList.toggle("show");
    }

    // 点击下拉菜单意外区域隐藏
    window.onclick = function(event) {
        if (!event.target.matches('.dropbtn')) {

            var dropdowns = document.getElementsByClassName("dropdown-content");
            var i;
            for (i = 0; i < dropdowns.length; i++) {
                var openDropdown = dropdowns[i];
                if (openDropdown.classList.contains('show')) {
                    openDropdown.classList.remove('show');
                }
            }
        }
    }

    function kefu(e) {
        $.ajax({
            url:'/web/chat/HasGotoKefu',
            dataType:'json',
            type:'get',
            success:function(result){

                if(result==true){
                    window.location.href='http://localhost:5677/chat/toChat';
                }else {
                    alert('当前咨询人数过多,客服都忙不过来了,请等会儿再咨询！')
                }

            },
            error:function () {
                alert('您可能还没有登录,请登录!')
            }
        })

    }


    //发送评论
    function sendComment()
    {

        let msg=document.getElementsByName('note')[0].value; //评论信息

        let pinfo=document.getElementsByName('note')[0].placeholder;

        //*****判断是评论还是回复

        if(pinfo.length>=5){ //pinfo是由[num1,num2]组成，最少都要有5个字符才合法，此时为回复


            let start=pinfo.indexOf('[');
            let end=pinfo.indexOf(']');

            let news=pinfo.substring(start+1,end);

            let arr1=news.split(',');

            let commentid=arr1[0]; //评论id
            let rootReply=arr1[1]; //顶层id

            console.log(commentid);
            console.log(rootReply);

            console.log(msg);


            new NoticeJs({
                text: '回复成功',
                position: 'topCenter',
                type: 'success',
                animation: {
                    open: 'animated bounceInRight',
                    close: 'animated bounceOutLeft'
                }
            }).show();


        }else{

            console.log(msg);

            new NoticeJs({
                text: '评论成功',
                position: 'topCenter',
                type: 'success',
                animation: {
                    open: 'animated bounceInRight',
                    close: 'animated bounceOutLeft'
                }
            }).show();

        }


    }


    function openReply(e1,e2)
    {

        document.getElementsByName('note')[0].placeholder='['+e1+','+e2+']';


        console.log(document.getElementsByName('note')[0].placeholder)


    }

    function clearplaceholder()
    {
        document.getElementsByName('note')[0].placeholder='';

    }


</script>


</html>